<template :model="materiel">
  <a-modal :title="'选择_'+materiel.Name" :width="980" :visible="visible" :confirmLoading="loading" @cancel="()=>{this.visible=false}">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="12" :sm="24">
            <a-form-item label="关键字">
              <a-input v-model="queryParam.Keyword" placeholder="关键字" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" v-action:Query @click="()=>{this.$refs.table.refresh()}">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table ref="table" size="default" rowKey="Id" :columns="columns" :data="loadData" :rowSelection="rowSelection" showPagination="auto">
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-action:Update @click="handleChoose(record)">选择</a>
        </template>
      </span>
    </s-table>

    <template slot="footer">
      <a-button @click="()=>{this.visible=false}">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import MainSvc from '@/api/Define/MaterialBomTreeSvc'
import EditForm from './Edit'
import EnumSelect from '@/components/CF/EnumSelect'
import EnumName from '@/components/CF/EnumName'
import CommonSelect from '@/components/CF/CommonSelect'

const columns = [
  { title: 'MES编码', dataIndex: 'Spec.MesCode', sorter: true },
  { title: '规格编码', dataIndex: 'Spec.Code', sorter: false },
  { title: '规格名称', dataIndex: 'Spec.Name', sorter: false },
  { title: '操作', dataIndex: 'action', width: '100px', scopedSlots: { customRender: 'action' } }
]

export default {
  components: {
    STable,
    MainSvc,
    EnumSelect,
    EnumName,
    EditForm,
    CommonSelect
  },
  data() {
    this.columns = columns
    return {
      // create model
      visible: false,
      confirmLoading: false,
      loading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { MaterielId: '', BomId: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var _query = Object.assign({}, { ...this.queryParam })
        for (const key in _query) {
          if (moment.isMoment(_query[key])) {
            _query[key] = _query[key].format('YYYY-MM-DD')
          }
        }
        const requestParameters = Object.assign({ sortField: 'CreateTime', sortOrder: 'Asc', Search: _query }, parameter)
        console.log('loadData request parameters:', requestParameters)
        return MainSvc.GetPage(requestParameters)
      },
      selectedRowKeys: [],
      selectedRows: [],
      materiel: { Id: '' },
      bomId: ''
    }
  },
  filters: {
  },
  created() {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    moment,
    openForm(record, bId) {
      this.title = '选择物料规格'
      this.visible = true
      this.materiel = record
      this.bomId = bId
      this.resetSearchForm()
      this.$refs.table.refresh()
    },
    onClose() {
        this.visible = false
    },
    handleChoose(record) {
      this.visible = true
      this.mdl = { ...record.Spec }
      this.$emit('Success', record.Spec)
      // this.$refs.editForm.openForm(record.Id, this.materiel.Id, this.materiel.Name, '选择')
      this.visible = false
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm() {
      this.queryParam = { MaterielId: this.materiel.Id, BomId: this.bomId }
    }
  }
}
</script>
